<template>
  <el-timeline>
    <el-timeline-item v-for="blog in blogList" :key="blog.id" :timestamp="dateFormat(blog.datetime)" placement="top">
      <el-card @click="jumpDetail(blog.id)" style="cursor: pointer;">
        <h1>
          <template v-for="tag in blog.tag" slot="dot">
            <el-badge :value="tag" />
          </template>
          {{ blog.name }}
        </h1>
        <span>{{ blog.desc }}</span>
      </el-card>
    </el-timeline-item>
  </el-timeline>
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" :total="blogTotalCount" v-model:current-page="currentPage" :page-size="pageSize">
    </el-pagination>
  </div>
</template>

<script>
import {ElNotification} from 'element-plus'
import store from '../store'

export default {
  name: "BlogList",
  mounted() {
    this.initNotification()
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 4,
    }
  },
  computed: {
    blogList() {
      return store.getters.getCurrentPageContent(this.currentPage, this.pageSize)
    },
    blogTotalCount() {
      return store.getters.getTotal
    }
  },
  methods: {
    dateFormat(timestamp) {
      return new Date(timestamp * 1000).toLocaleString()
    },
    jumpDetail(id) {
      this.$router.push({path: '/detail', query: {id: id}})
    },
    initNotification() {
      ElNotification({
        title: '使用提示╰(*°▽°*)╯',
        message: '登陆后可以进行博客管理等操作！使用愉快~',
        offset: 100,
        showClose: false,
        duration: 3000,
      })
    }
  }
}
</script>

<style scoped>

</style>